<script setup>
import { computed } from 'vue'

const props = defineProps({
  text: String,
  bgColor: {
    type: String,
    default: '',
  },
  textColor: {
    type: String,
    default: '#F1F2F3',
  },
  width: {
    type: Number,
    default: 100,
  },
  circle: {
    type: Boolean,
    default: false
  }
})

const getColors = (index) => {
  const colors = [
    '#5fa4e9',
    '#0bf561',
    '#61b85b',
    '#ded152',
    '#4297fa',
    '#c681e8',
    '#52cf96',
    '#028fd1',
    '#fb75e1',
    '#70b19b',
    '#5dddeb',
    '#1371e7',
    '#932483',
    '#d85875',
    '#59cc84',
    '#84220f',
    '#d956b5',
    '#0b055e',
    '#f2ef0b',
    '#68dece',
    '#c69e0d',
    '#335557',
    '#df6b65',
    '#29aa8a',
    '#f729b4',
    '#d7a631',
    '#a2c8e5',
    '#3073df',
    '#8855e1',
  ]
  return colors[index % colors.length]
}

const backgroundColor = computed(() => {
  if (props.bgColor) {
    return props.bgColor
  }
  return getColors(props.text ? props.text.charCodeAt(0) : 0)
})

const avatarText = computed(() => {
  return props.text ? props.text.substring(0, 1) : ''
})

const textSize = computed(() => {
  return props.width ? (parseInt(props.width * 0.5) + 'px') : '20px'
})
</script>

<template>
  <div
    :style="{width: width + 'px', height: width + 'px', backgroundColor: backgroundColor}"
    :class="circle ? 'avatar-customer circle' : 'avatar-customer'"
  >
    <span :style="{color: textColor, fontSize: textSize}">{{ avatarText }}</span>
  </div>
</template>

<style scoped lang="scss">
.avatar-customer {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  font-style: normal;
  &.circle {
    border-radius: 50%;
    overflow: hidden;
  }
}
</style>